<template>
    <div>
        <form action="/">
            <van-search
                    v-model="value"
                    show-action
                    :placeholder=this.SearchTitle
                    @search="onSearch"
                    @cancel="onCancel"
                    input-align="center"
                    background="#FD7304"
                    shape="round"
            />
        </form>
        <div class="history_msg">
            <ul class="search_content">
                <router-link :to="'/NewsPage/'+item.articleId" v-for="(item,index) in SearchContent" :key="index">
                    <van-row type="flex">
                        <van-col span="9" style="text-overflow: ellipsis;white-space:nowrap;overflow: hidden">
                            <img :src="item.bannerImgUrl" alt="" style="width: 100%;height: 90px">
                        </van-col>
                        <van-col span="13" style="text-overflow: ellipsis;white-space:nowrap;overflow: hidden; margin-left: 15px;">
                            <h4>{{item.title}}</h4>
                            <div class="right_bottom">
                                <div>
                                    {{item.articleSource}}
                                </div>
                                <div>{{item.sendTime}}</div>
                            </div>
                        </van-col>
                    </van-row>
                </router-link>
            </ul>
        </div>
    </div>
</template>

<script>
    import {getSearch} from "../../../api/GoodNews";
    import {Toast} from "vant";
import {mapState} from 'vuex'
    export default {
        name: "SearchContent",
        data() {
            return {
                value: '',
                list:[],
            };
        },
        created() {
            this.$store.dispatch("getSearchListaTitle",{SearchTitle:sessionStorage.getItem('title')})
            getSearch(1,10,this.SearchTitle).then(res=>{
                this.list = res.rows
                this.$store.commit("favorite",
                    {favorite: 2,})
                this.$store.commit("favorite",
                    {favorite: 2,})
                getSearch(1,10,this.SearchTitle).then(res=>{
                    this.list = res.rows
                })

            })},
        methods: {
            onSearch() {
                sessionStorage.removeItem('title')
                sessionStorage.setItem('title',this.value)
                getSearch(1,10,this.value).then(res=>{
                    if (res.total==0){
                        Toast.fail('没有您要找的内容，试试搜索别的吧');
                    }
                    this.list = res.rows
                    this.$store.commit('ReSearchContent',{SearchContent:this.list,SearchTitle:sessionStorage.getItem('title')})
                    this.$store.commit("favorite",
                        {favorite: 2,})
                })
            },
            onCancel() {
                Toast('取消');
                this.$router.push({ path: '/Search' });
            },
        },
        computed:{
            ...mapState({
                SearchContent:'SearchContent',
                SearchTitle:'SearchTitle'
            })
        }
    }
</script>

<style scoped lang="less">
    .history_msg{
        padding: 10px;
        .search_content{
            li{
            padding: 10px;
                border-top: 5px solid #F9F9F9;
}
        }
    }
    .right_bottom{
        margin-top: 30px;

    }
</style>